<template>
  <div class="">
    <el-row :gutter="7">
      <el-col :span="8"><Unit :breed="breed"></Unit></el-col>
      <el-col :span="8"><UnitB :breed="breed"></UnitB></el-col>
      <el-col :span="8"><UnitC :breed="breed"></UnitC></el-col>
    </el-row>
    <el-row :gutter="7" style="margin-top: 6px">
      <el-col :span="8"><Charts :navItems="navItems"></Charts></el-col>
      <el-col :span="8"><lineCharts :navItems="navItemsB"></lineCharts></el-col>
      <el-col :span="8"><barCharts :breed="kind"></barCharts></el-col>
      <!-- <el-col :span="8"><Charts></Charts></el-col>
      <el-col :span="8"><Charts></Charts></el-col> -->
    </el-row>
    <!-- <AdvList></AdvList> -->
  </div>
</template>
<script setup>
import { computed } from "vue";

  const props = defineProps({
    breed: {
      type: [String, Number], // 指定类型
      // required: true, // 是否必须
      // default: "1476451881127518210", // 默认值
    },
  });
  const wheatItems = [
    { name: '小麦', id: '混麦' },
    { name: '面粉', id: '1476451909787197442' },
    { name: '优质麦', id: '1959325569632949567' },
    { name: '麸皮', id: '麸皮' },
  ];
  const cornItems = [
    { name: '玉米', id: '玉米' },
    { name: '玉米淀粉', id: '玉米淀粉' },
    { name: 'DDGS', id: 'DDGS' },
    { name: '酒精', id: '酒精' },
    { name: '蛋白粉', id: '玉米蛋白粉' },
    { name: '胚芽粕', id: '玉米胚芽粕' },
  ];
  const riceItems = [
    { name: '稻谷', id: '1959485269841512667' },
    { name: '大米', id: '1959485369884141689' },
  ];
  const oilItems = [
    { name: '油料', id: '1859325569632140828' },
    { name: '油脂', id: '1859325569632151654' },
    { name: '油粕', id: '1859325569632152225' },
  ];
  const navItems = computed(() => {
    if(props.breed === '1476451881127518210') {
      return wheatItems;
    } else if(props.breed === '1476452794433019906') {
      return cornItems;
    } else if(props.breed === '1463414115957198849') {
      return riceItems;
    } else if(props.breed === '1463414446753566721') {
      return oilItems;
    }
  });
  // 中部图表
  const navItemsB = computed(() => {
    if(props.breed === '1476451881127518210') {
      return [
        { name: '小麦到岸完税价', id: '小麦-小麦' },
      ];
    } else if(props.breed === '1476452794433019906') {
      return [
        { name: '玉米到岸完税价', id: '玉米-玉米' },
      ];
    } else if(props.breed === '1463414115957198849') {
      return [
        { name: '越南大米到岸完税价', id: '稻谷-越南大米' },
        { name: '泰国大米到岸完税价', id: '稻谷-泰国大米' },
      ];
    } else if(props.breed === '1463414446753566721') {
      return [
        { name: '进口大豆', id: '油脂油料-大豆' },
        { name: '进口菜籽', id: '油脂油料-豆油' },
        { name: '进口棕榈油', id: '油脂油料-棕榈油' },
      ];
    }
  });
  // 右侧图表
  const kind = computed(() => {
    if(props.breed === '1476451881127518210') {
      return '小麦';
    } else if(props.breed === '1476452794433019906') {
      return '玉米';
    } else if(props.breed === '1463414115957198849') {
      return '稻谷';
    } else if(props.breed === '1463414446753566721') {
      return '大豆';
    }
  })
</script>

<style lang="scss" scoped>
  // .box{
  //   height: 250px;
  //   background-color: #fafafa;
  //   .nav{
  //     width: 100%;
  //     height: 32px;
  //     background-color: #f0f6fa;
  //   }
  // }
</style>